<template>
  <div class="inventory-page">
    <!-- 页面标题 -->
    <el-row>
      <h2>可出库存</h2>
    </el-row>

    <!-- 筛选条件 -->
    <el-card class="filter-card">
      <el-form :model="filterForm" inline>
        <el-form-item label="产品编号：" prop="productCode">
          <el-input v-model="filterForm.productCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="产品名称：" prop="productName">
          <el-input v-model="filterForm.productName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="60"></el-table-column>
        <el-table-column prop="productCode" label="产品编号" width="140"></el-table-column>
        <el-table-column prop="productName" label="产品名称" width="200"></el-table-column>
        <el-table-column prop="specification" label="产品规格" width="140"></el-table-column>
        <el-table-column prop="category" label="类别" width="140"></el-table-column>
        <el-table-column prop="unit" label="存储单位" width="140"></el-table-column>
        <el-table-column prop="stock" label="库存" width="140"></el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          @current-change="onPageChange">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  name: "InventoryPage",
  setup() {
    // 筛选条件
    const filterForm = ref({
      productCode: "",
      productName: "",
    });

    // 表格数据
    const tableData = ref([
      { id: 1, productCode: "000189", productName: "B25-10000 汉贝充电宝", specification: "个", category: "移动电源", unit: "个", stock: 16458 },
      { id: 2, productCode: "000189", productName: "J29A 清水移动电源 10000mAh", specification: "个", category: "移动电源", unit: "个", stock: 105 },
      { id: 3, productCode: "000189", productName: "条码打印机", specification: "台", category: "调配组", unit: "台", stock: 3522 },
      // 更多数据...
    ]);

    // 分页信息
    const pagination = ref({
      currentPage: 1,
      pageSize: 10,
      total: tableData.value.length,
    });

    // 查询方法
    const onSearch = () => {
      console.log("查询条件：", filterForm.value);
    };

    // 重置方法
    const onReset = () => {
      filterForm.value.productCode = "";
      filterForm.value.productName = "";
    };

    // 分页切换
    const onPageChange = (page) => {
      pagination.value.currentPage = page;
      console.log("当前页：", page);
    };

    return {
      filterForm,
      tableData,
      pagination,
      onSearch,
      onReset,
      onPageChange,
    };
  },
};
</script>

<style scoped>
.inventory-page {
  padding: 20px;
}
.filter-card {
  margin-bottom: 20px;
}
.table-card {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
